<footer class="container">
	<div class="flex flex-wrap bg-orange-500 text-panoptic-blue-500 border-l border-r border-b border-orange">
		<a href="/column"
			class="md:w-1/3 w-full flex flex-col justify-between p-5 md:p-8 lg:p-12 border-r border-t border-orange hover:bg-orange-600">
			<div>
				<h2>Know More</h2>
				<p class="mt-8 text-orange-800">
					Read about important updates and our detailed analysis of FRT Projects which is being deployed in
					the country. The case studies will look at the background of the project, how many people it will
					affect and its scope and legality.
				</p>
			</div>
			<span class="text-white text-xl font-semibold mt-4">Go to Panoptic Column</span>
		</a>
		<a href="/sign-the-petition"
			class="md:w-1/3 w-full flex flex-col justify-between p-5 md:p-8 lg:p-12 border-r border-t border-orange hover:bg-orange-600">
			<div>
				<h2>Get Involved</h2>
				<p class="mt-8 text-orange-800">The petition is for calling on/asking the government to immediately put
					a moratorium on the development and use of FRT by government authorities.</p>
			</div>
			<span class="text-white text-xl font-semibold mt-4">Sign the petition</span>
		</a>
		<div class="md:w-1/3 w-full border-r border-t border-orange flex flex-col justify-between">
			<div class="p-5 md:p-8 lg:p-12">
				<h2>Spread the Message</h2>
				<p class="mt-8 text-orange-800">Help us raise awareness about the cause among everyone. And, you can
					start
					by sharing this website with your peers :)</p>
			</div>
			<div class="flex flex-wrap">
				<a target="_blank" rel="noopener noreferrer" href="{{ settings.youtube }}"
					class="flex justify-center w-1/3 p-5 md:p-8 lg:p-12 hover:bg-orange-600 border-r border-t border-orange">
					<img class="h-10" src="/assets/panoptic/images/youtube.svg">
				</a>
				<a target="_blank" rel="noopener noreferrer" href="{{ settings.twitter }}"
					class="flex justify-center w-1/3 p-5 md:p-8 lg:p-12 hover:bg-orange-600 border-r border-t border-orange">
					<img class="h-10" src="/assets/panoptic/images/twitter.svg">
				</a>
				<a target="_blank" rel="noopener noreferrer" href="{{ settings.instagram }}"
					class="flex justify-center w-1/3 p-5 md:p-8 lg:p-12 hover:bg-orange-600 border-t border-orange">
					<img class="h-10" src="/assets/panoptic/images/instagram.svg">
				</a>
			</div>
		</div>
	</div>
	<div class="flex flex-wrap justify-between p-5 md:p-8 lg:p-12 border bg-panoptic-blue-500">
		<div class="w-full md:w-1/5 mt-8 md:mt-0">
			<h5 class="text-teal-blue-300 font-semibold text-sm uppercase tracking-wider">Project Panoptic</h5>
			<ul class="mt-4">
				<li class="mt-2">
					<a href="/" class="hover:underline">Tracker</a>
				</li>
				<li class="mt-2">
					<a href="/central" class="hover:underline">Central FRTs</a>
				</li>
				<li class="mt-2">
					<a href="/column" class="hover:underline">Panoptic Column</a>
				</li>
				<li class="mt-2">
					<a href="/research" class="hover:underline">Research</a>
				</li>
				<li class="mt-2">
					<a href="/right-to-information" class="hover:underline">Right to Information</a>
				</li>
			</ul>
		</div>
		<div class="w-full md:w-1/5 mt-8 md:mt-0">
			<h5 class="text-teal-blue-300 font-semibold text-sm uppercase tracking-wider">Get Involved</h5>
			<ul class="mt-4">
				<li class="mt-2">
					<a href="/sign-the-petition" class="hover:underline">Sign the Petition</a>
				</li>
				<li class="mt-2">
					<a href="/report-frt" class="hover:underline">Report FRT</a>
				</li>
				<li class="mt-2">
					<a target="_blank" rel="noopener noreferrer" href="https://forum.internetfreedom.in"
						class="hover:underline">IFF Forum</a>
				</li>
			</ul>
		</div>
		<div class="w-full md:w-1/5 mt-8 md:mt-0">
			<h5 class="text-teal-blue-300 font-semibold text-sm uppercase tracking-wider">Links</h5>
			<ul class="mt-4">
				<li class="mt-2">
					<a href="/donate" class="hover:underline">Donate</a>
				</li>
				<li class="mt-2">
					<a href="/about" class="hover:underline">About</a>
				</li>
				<li class="mt-2">
					<a href="/privacy-policy" class="hover:underline">Privacy Policy</a>
				</li>
				<li class="mt-2">
					<a target="_blank" rel="noopener noreferrer" href="https://github.com/frappe/panoptic"
						class="hover:underline">Source</a>
				</li>
				<li class="mt-2">
					<a target="_blank" rel="noopener noreferrer" href="https://internetfreedom.in/about"
						class="hover:underline">About IFF</a>
				</li>
			</ul>
		</div>
		<div class="w-full md:w-2/5 mt-8 md:mt-0 text-sm flex flex-col justify-between">
			<div>
				<p>A public interest community project | <a class="text-orange-500 hover:underline"
						href="mailto:panoptic@internetfreedom.in ">panoptic@internetfreedom.in</a>
				<p>All contents licensed under CC-BY unless stated otherwise.</p>
				<div class="mt-6 md:mt-4">
					Built and maintained by the team at <a target="_blank" rel="noopener noreferrer"
						class="text-orange-500 hover:underline" href="https://frappe.io">Frappe</a>.
					<br>
					Designed by <a target="_blank" rel="noopener noreferrer" class="text-orange-500 hover:underline"
						href="https://shobhitkatikia.com/">Shobhit Katikia</a>,
					supported by <a target="_blank" rel="noopener noreferrer" class="text-orange-500 hover:underline"
						href="https://www.datakind.org/chapters/datakind-blr">DataKind Bangalore</a>.
				</div>
			</div>
			<div class="flex justify-start my-5">
				<img class="mr-0 md:mr-8 h-12 mr-5" src="/assets/panoptic/images/panoptic.svg">
				<img class="h-12" src="/assets/panoptic/images/iff-wide.png">
			</div>
		</div>
	</div>
</footer>